import React, {PureComponent} from "react";

class ArticleTitleWrapper extends PureComponent {

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    render() {
        return (
            <div style={atRootStyle}>
                <div
                    style={this.props.choiceIndex === 0 ? {...atCommonStyle, ...atCurrentStyle} : atCommonStyle}
                    onClick={() =>{
                        this.handleClick(0);
                    }}
                >
                    最新博文
                </div>

                <div style={atTagStyle}/>

                <div
                    style={this.props.choiceIndex === 1 ? {...atCommonStyle, ...atCurrentStyle} : atCommonStyle}
                    onClick={() =>{
                        this.handleClick(1);
                    }}
                >
                    最新项目
                </div>
            </div>
        );
    }

    handleClick(index) {
     this.props.changeChoice(index);
    }

}

export default ArticleTitleWrapper;

const atRootStyle = {
    width: "100%",
    borderBottom: "solid 2px #8db5d0",
    overflow: 'hidden',
};

const atCommonStyle = {
    float: 'left',
    padding: '10px',
    color: "#333",
    cursor: "pointer",
};
const atCurrentStyle = {
    color: "#276692"
};

const atTagStyle = {
    float: 'left',
    width: 2,
    height: 16,
    backgroundColor: "#e2e7ed",
    margin: '10px  0',

};

